import { add_edit_lonbon, get_sickbed_select } from '@/services/devices';
import { ActionType, ProForm, ProFormSelect, ProFormText } from '@ant-design/pro-components';
import { Divider, Modal, message } from 'antd';
import React from 'react'

interface Iprops {
    isShowAddModal: (show: boolean) => void;
    addModal: boolean;
    actionRef: React.MutableRefObject<ActionType | undefined>;
}
const AddDevices = (props: Iprops) => {
    const { addModal, isShowAddModal, actionRef } = props

    // 获取病床编号
    const getSickbedSelect = async () => {
        let params = await get_sickbed_select();
        console.log('病床列表下拉框', params);
        let res: any = [];
        params.data.map((item: { patient_name: string; id: string, code: number }) => {
            let temp: any = {};
            temp['label'] = item.patient_name ? item.code + '/' + item.patient_name : item.code
            temp['value'] = item.code;
            res.push(temp);
        });
        return res;
    }

    // 新增监护设备
    const add_bind_devices = async (values: any) => {
        console.log('values', values);
        let res: any = await add_edit_lonbon({ ...values })
        if (res.code == 200) {
            // 刷新列表
            actionRef.current?.reload()
            message.success('新增成功');
            // 关闭弹窗
            isShowAddModal(false)
        } else {
            message.error(res.msg)
        }

    }
    return (
        <Modal
            title="新增设备"
            open={addModal}
            onCancel={() => isShowAddModal(false)}
            width={500}
            destroyOnClose={true}
            footer={null}
            centered
        >
            <Divider />
            <ProForm<{
                jigou: string;
                reason: string;
            }>
                layout="horizontal"
                labelCol={{ span: 5 }}
                wrapperCol={{ span: 15 }}
                onReset={() => isShowAddModal(false)}
                onFinish={(value) => add_bind_devices(value)}
                submitter={{
                    // 配置按钮文本
                    searchConfig: {
                        resetText: '取消',
                        submitText: '提交',
                    },
                    resetButtonProps: {
                        style: {
                            display: 'block',
                            position: 'absolute',
                            left: 'calc(50% - 107px)',
                        },
                    },
                    submitButtonProps: {
                        style: {
                            display: 'block',
                            position: 'absolute',
                            right: 'calc(50% - 107px)',
                        },
                    },
                }}
            >
                <ProFormSelect
                    name="type"
                    label="设备类型"
                    request={async () => [
                        { label: '入户终端', value: 1 },
                    ]}
                    placeholder="请选择设备类型"
                    rules={[{ required: true, message: '请选择设备' }]}
                />
                <ProFormText
                    name="mac"
                    label="MAC地址"
                    placeholder="请输入MAC地址"
                    rules={[
                        { required: true, message: '请输入MAC地址' },
                        { pattern: /(^\S)((.)*\S)?(\S*$)/, message: '不能输入空格' },
                        { pattern: /^[a-zA-Z\d!@#$%^&*()+={}[\]|;:'",.<>/?~`-]+$/, message: '只允许输入数字、字母、字符' }
                    ]}
                />
                <ProFormSelect
                    name="code"
                    label="病床编号"
                    request={async () => getSickbedSelect()}
                    placeholder="请选择病床编号"
                    fieldProps={{
                        showSearch: true,
                        filterOption: (input: any, option: any) =>
                            (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
                    }}
                />
                <br />
            </ProForm>
            <br />
        </Modal>
    )
}
export default AddDevices